import React, {useState} from 'react';
// 注意：1- hooks只允直接放置到函数组件中运行，或自定义的hooks函数中
// 注意：2- 更新状态时，如果状态是一个引用类型，必须要保证更新的数据状态是一个全新的引用地址。
// 以下有异常：
// React Hook "React.useState" cannot be called at the top level.
//     React Hooks must be called in a React function component or
// a custom React Hook function
// const [num,setNum] = React.useState(1);
function App(props) {
    const [num,setNum] = React.useState(1);
    const [arr,setArr] = useState([1,2,3,4]);
    // 以下程序有异常
    // function my(){
    //     const [userName,setUserName] = useState("zhangsan");
    // }
    //

    // 自定义hook函数（函数的名字以use开头）
    function useMy(){
        const [userName,setUserName] = useState("zhangsan");
    }
    return (
        <div>
            <h3>App</h3>
            <button onClick={()=>{
                setNum(2);
            }}>{num}</button>

            <button onClick={()=>{
                // 1- 以下程序不会重新执行函数（不会更新视图）
                // arr.push(arr.length+1)
                // setArr(arr)

                // 2- 传入的是一个新的引用地址，可以更新视图
                setArr([
                    ...arr,
                    arr.length+1
                ])
            }}>为数据添加元素</button>
            <p>{arr}</p>
        </div>
    );
}

export default App;